/*
 * @Author: 鹿佰冲
 * @Date: 2018-05-16 10:46:57
 * @Last Modified by: lbc
 * @Last Modified time: 2018-11-14 17:50:36
 */
<template>
  <div class="main">
    <div class="head">
      {{msg}}
    </div>
    <div @click="showToast">showToast</div>
    <div @click="showMsgBox" >showMsgBox</div>
    <div v-long="longMsg">自定义指令long</div>
    <div style="width:100%;height:300px;background:red"></div>
    <div style="width:100%;height:300px;background:gray"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Index",
      longMsg:'这是自定义指令long的msg'
    };
  },
  mounted() {},
  methods: {
    showToast() {
      var options = {
        text: "加载中...",
        duration: 1000
      };
      this.$loading.show(options);
    },
    showMsgBox() {
      //配置msgBox参数
      var options = {
        title: "请确认信息",
        text: "你是不是一个小可爱？",
        showCancelBtn: true,
        showConfirmBtn: true,
        CancelFunction: () => {
          // alert("cancel")
          // console.log(this)
          this.msg = "点击取消，改变this.msg";
        },
        ConfirmFunction: () => {
          // alert("confirm")
          // console.log(this)
          this.msg = "点击确认，改变this.msg";
        }
      };
      this.$msgBox.show(options);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
